<template>
    <div class="tableRow">
        <el-row class="select-list" v-permission="'tool:gen:query'">
            <el-form :inline="true" ref="selectForm" :model="selectFormModel" :label-position="'right'"
                     label-width="80px" size="mini" @submit.native.prevent>
                <el-form-item label="表名称" prop="tableName">
                    <el-input v-model="selectFormModel.tableName" placeholder="表名称" style="width: 200px" clearable
                              @keyup.enter.native="onSearch"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
                    </el-button>
                    <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                               @click="onRefreshSelectForm">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="toolbar">
            <el-button type="primary" icon="el-icon-download" size="mini" plain @click="batchGenCode"
                       :disabled="dialog.isBatchGenCodeDisabled"
                       v-permission="'tool:gen:code'">
                生成代码
            </el-button>
        </el-row>
        <data-table ref="dataTable"
                    :options="options"
                    :operates="operates"
                    :api="getGenList"
                    :columns="columns"
                    :query="selectFormModel"
                    @handleSelectionChange="handleSelectionChange"
        />
    </div>
</template>
<script lang="ts">
  import {Component, Ref, Vue} from 'vue-property-decorator';
  import DataTable from '@/components/DataTable/DataTable.vue';
  import {batchGenCode, genCode, getGenList} from '@/api/gen';
  import {mimeMap, resolveBlob} from '@/utils';

  @Component({
    components: {
      DataTable
    }
  })
  export default class Role extends Vue {
    private getGenList: Function = getGenList;
    @Ref('dataTable') private dataTable: any;
    @Ref('selectForm') private selectForm: any;

    /*搜索框*/
    selectFormModel: any = {
      tableName: ''
    };
    /*列信息*/
    columns: any = [
      {label: '表名', prop: 'tableName'},
      {label: '描述', prop: 'tableComment'},
      {label: '创建时间', prop: 'createTime', width: 160},
      {label: '更新时间', prop: 'updateTime', width: 160},
    ];

    // table 的参数
    options: any = {
      stripe: true, // 是否为斑马纹 table
      loading: false, // 是否添加表格loading加载动画
      highlightCurrentRow: true, // 是否支持当前行高亮显示
      multipleSelect: true, // 是否支持列表项选中功能
    };
    /*操作栏*/
    operates: any = {
      title: '操作',
      width: 'auto',
      fixed: 'right',
      list: [
        {
          label: '生成代码',
          type: 'primary',
          icon: 'el-icon-download',
          plain: true,
          disabled: (index, row) => {
            return false;
          },
          permission: 'tool:gen:code',
          method: (index, row) => {
            this.genCode(index, row);
          }
        }
      ]
    };

    dialog: any = {
      isBatchGenCodeDisabled: true,
      formData: []
    };


    /*选中事件*/
    handleSelectionChange(val): void {
      if (val) {
        this.dialog.isBatchGenCodeDisabled = val.length <= 0;
      }
      this.dialog.formData = val;
    }

    /*生成代码*/
    batchGenCode(index: number, row: any): void {
      this.$confirm('确定要生成选中表的代码吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const tableNames: Array<any> = [];
        this.dialog.formData.forEach((item, index) => {
          tableNames[index] = item.tableName;
        });
        return batchGenCode({'tableNames': tableNames});
      }).then((response: any) => {
        resolveBlob(response, mimeMap.zip);
      }).catch((e) => {
        console.log(e);
      });
    }

    genCode(index: number, row: any): void {
      this.$confirm('确定要生成该表的代码吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return genCode({'tableName': row.tableName});
      }).then((response: any) => {
        resolveBlob(response, mimeMap.zip);
      }).catch((e) => {
        console.log(e);
      });
    }

    /*搜索*/
    onSearch(): void {
      this.dataTable.refresh();
    }

    /*重置*/
    onRefreshSelectForm(): void {
      //恢复搜索默认信息
      this.selectForm.resetFields();
      this.onSearch();
    }
  }
</script>

<style scoped lang="scss">

</style>

